require('./Valuationstudent.styl');
import { Boxs, Group, NavBar, Scroller } from 'saltui';
import Icon from 'salt-icon'
const { HBox, Box, VBox } = Boxs;
const Rollup = require('components/rollup');
class Valuationstudent extends React.Component {

    constructor(props) {
        super(props);
        this.classId = props.classList[0].classId;
        this.state = {
            title: props.classList[0].name || props.classList[0].title,//标题
            classList: props.classList,//班级列表
            listData: props.studentList,//学生列表
            selectStudentList: props.selectStudentList || [] //[]//选中的学生列表
        };
        this.listData = props.selectStudentList || [];
        this.handleClickIcon = this.handleClickIcon.bind(this);
        if (props.type = 'edit') {
            for (let item of this.state.selectStudentList) {
                let num = this.modifyState(item.id, this.state.listData);
                if (num > -1) {
                    this.state[`active${num}_${this.classId}`] = true;
                }
            }
            this.modify = {
                [this.classId]: true
            }
        }
    }
    //修正编辑模式选中状态
    modifyState(id, listData) {
        const fn = (item) => {
            return item.id == id;
        }
        return listData.findIndex(fn);
    }
    handleClickIcon(index) {
        let id = `active${index}_${this.classId}`;
        let values = (eval(`!this.state.${id}`));
        this.setState({ [`active${index}_${this.classId}`]: values }, () => {
            if (values) {
                this.listData.push(this.state.listData[index]);
            } else {
                let id = this.state.listData[index].id;
                const fn = (item) => {
                    return item.id == id;
                }
                let num = this.listData.findIndex(fn);
                if (num >= 0) {
                    this.listData.splice(num, 1);
                }
            }
            this.setState({ selectStudentList: this.listData })
        });
    }
    render() {
        let t = this;
        return (
            <div className="valuationstudent">
                {/* 班级选项 */}
                <Rollup
                    ref='student_rollup'
                    type="class"
                    title={this.state.title}
                    listdata={this.state.classList}
                    refresh={this.props.refresh}
                />
                {/* 选项的人员列表 */}
                <Scroller autoRefresh={true} className="t-PT20 page-y">
                    {this.state.listData instanceof Array && this.state.listData.length > 0 ? this.state.listData.map((item, index) => {
                        return (
                            <Group.List className="t-LH44 t-PL10 t-PR20" key={`list-item-${index}-${this.classId}`}>
                                <HBox vAlign="center" >
                                    <Box flex={1}>{item.name}</Box>
                                    <Box flex={1} className="t-FAR"><Icon name="check-round" width="20" fill={(eval(`t.state.active${index}_${this.classId}`)) ? "#53CAC3" : "#E5E5E5"} onClick={this.handleClickIcon.bind(this, index)} /></Box>
                                </HBox>
                            </Group.List>
                        );
                    }) : <div className="t-FAC">暂无节点数据</div>}
                </Scroller>
                {/* 底部选中的人员 */}
                <Group.List>
                    <Scroller className="page-x" autoRefresh={true} eventPassthrough={true} scrollX scrollY={false}>
                        <HBox vAlign="center" className="nowrap" >
                            {this.state.selectStudentList.length > 0 && this.state.selectStudentList.map((item, index) => {
                                return (
                                    <Box className="t-ML4 t-LH30" key={`selectlist-item-${index}`}>{item.name}</Box>
                                );
                            })}
                        </HBox>
                    </Scroller>
                </Group.List>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.studentList != this.state.listData) {
            this.classId = this.refs.student_rollup.classId;
            for (let item of this.state.classList) {
                if (item.classId == this.classId) {
                    var title = item.title;
                }
            }
            if (this.props.type = 'edit' && !this.modify[this.classId]) {
                for (let item of this.state.selectStudentList) {
                    let num = this.modifyState(item.id, nextProps.studentList);
                    if (num > -1) {
                        this.state[`active${num}_${this.classId}`] = true;
                    }
                }
                this.modify[this.classId] = true;
            }
            this.setState({ listData: nextProps.studentList, title });
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

module.exports = Valuationstudent;
